<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>popupWindow</title>
    <link rel="stylesheet" href="../../model/element.css">
    <link rel="stylesheet" href="../../model/jsFn.css">
</head>
<body>
<!--目录-->
<div class="catalog">
    <h2>目录</h2>
    <ul>
        <li>
            <p><a href="#element">< popupWindow ></a></p>
        </li>
        <li>
            <p><a href="#attribute">属性</a></p>
            <ul>
                <li><p><a href="#example">实例</a></p></li>
                <li><p><a href="#optional">可选属性</a></p></li>
                <li><p><a href="#note">提示和注释</a></p></li>
                <li><p><a href="#sketch">效果图</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#jsFn">js函数</a></p>
            <ul>
                <li><p><a href="#jsFn_finish">finish</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#childElement">子标签</a></p>
            <ul>
                <li><p><a href="#childElement_header">header</a></p></li>
                <li><p><a href="#childElement_body">body</a></p></li>
                <li><p><a href="#childElement_footer">footer</a></p></li>
            </ul>
        </li>
    </ul>
</div>
<!--标签-->
<div id="element">
    <h2>popupWindow</h2>
    <div>简介:</div>
    <p>附着在指定view上的一个对话框</p>
</div>
<!--属性-->
<div id="attribute">
    <h2>属性</h2>
    <div style="margin-left: 25px" id="example">
        <h3>实例:</h3>
        <!--xmp标签可以直接书写xml格式文本-->
        <xmp>
            <popupWindow disappear="true" dismiss="console.log('非正常关闭')" width="0.6" height="-2">

            </popupWindow>
        </xmp>
    </div>
    <div id="optional">
        <h3>可选属性:</h3>
        <table >
            <tbody>
            <tr>
                <th>属性</th>
                <th>值</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>background</td>
                <td>color|img</td>
                <td>color:背景色,img:图片路径</td>
            </tr>
            <tr>
                <td>position</td>
                <td>bottom|center|left|right|top|</td>
                <td>弹窗大概位置,支持组合属性:position="right|top";默认center</td>
            </tr>
            <tr>
                <td>width</td>
                <td>-2|-1|1>x>0|x>1</td>
                <td>弹窗宽度: <br/>
                    -2:自适应;-1满屏:1>x>0:屏幕比重;x>0:具体宽度值;默认-2</td>
            </tr>
            <tr>
                <td>height</td>
                <td>-2|-1|1>x>0|x>1</td>
                <td>弹窗高度: <br/>
                    -2:自适应;-1满屏:1>x>0:屏幕比重;x>0:具体高度值;默认-2</td>
            </tr>
            <tr>
                <td>dismiss</td>
                <td>javaScript</td>
                <td>弹窗不正常关闭时执行的代码</td>
            </tr>
            <tr>
                <td>disappear</td>
                <td>boolean</td>
                <td>点击空白区域是否可以关闭弹窗,默认true:可以</td>
            </tr>
            <tr>
                <td>window</td>
                <td>boolean</td>
                <td>窗体外背景是否半透明,默认true:半透明</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="note">
        <h3>提示和注释:</h3>
        <p>若手动执行finish()或执行过next()方法,则不会触发dismiss属性; <br/>
            若点击空白区域关闭了弹窗,则会触发dismiss属性
        </p>
    </div>
    <div id="sketch">
        <h3>效果图:</h3>
        <img src="../img/popupWindow1.png" alt="">
        <img src="../img/popupWindow2.png" alt="">
    </div>
</div>
<!--js方法-->
<div id="jsFn">
    <h2>js方法</h2>
    <div class="jsFnModel" id="jsFn_finish">
        <h3>finish:</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>document.finish() -> null</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>关闭当前弹窗,和document里的finish不一样</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <p>无</p>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>无</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <code>
                document.finish();
            </code>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
</div>
<!--子标签-->
<div id="childElement">
    <h2>子标签</h2>
    <div id="childElement_header">
        <h3>header:</h3>
        <p>头布局, <a href="../header.html">参见 < header ></a></p>
    </div>
    <div id="childElement_body">
        <h3>body:</h3>
        <p>身体布局, <a href="../body.html">参见 < body ></a></p>
    </div>
    <div id="childElement_footer">
        <h3>footer:</h3>
        <p>尾布局, <a href="../footer.html">参见 < footer ></a></p>
    </div>
    <div class="author"><p>by-草草</p></div>
</div>
</body>
</html>